<template>
  <!-- 表单 -->
  <div class="conant">
    <el-card class="box-card" style="margin-top: 50px">
      <el-form>
        <el-form-item label="秒杀订单超时:">
          <el-input v-model="Seckill">
            <template #append>分</template>
          </el-input>
          <span>未付款,订单自动关闭</span>
        </el-form-item>
        <el-form-item label="正常订单超时:">
          <el-input v-model="Regular">
            <template #append>分</template>
          </el-input>
          <span>未付款,订单自动关闭</span>
        </el-form-item>
        <el-form-item class="input" label="发货超时:">
          <el-input v-model="Deliver">
            <template #append>天</template>
          </el-input>
          <span>未收货,订单自动完成</span>
        </el-form-item>
        <el-form-item label="订单完成超过:">
          <el-input v-model="fulfillment">
            <template #append>天</template>
          </el-input>
          <span>自动结束交易,把你申请售后</span>
        </el-form-item>
        <el-form-item label="订单完成超过:">
          <el-input v-model="orderfulf">
            <template #append>天</template>
          </el-input>
          <span>自动五星好评</span>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as api from "../../request/api";
import { affixProps, ElMessage, ElMessageBox } from "element-plus";

//绑定的input的数据
const Seckill = ref(2);
const Regular = ref(2);
const Deliver = ref(2);
const fulfillment = ref(444);
const orderfulf = ref(1);

// 初始进入页面发送请求
api.order.orderSetting(1).then((res) => {
  console.log(res);
  Seckill.value = res.flashOrderOvertime;
  Regular.value = res.normalOrderOvertime;
  Deliver.value = res.confirmOvertime;
  fulfillment.value = res.finishOvertime;
  orderfulf.value = res.commentOvertime;
  console.log(1);
});

//提交的事件发请求
const submit = () => {
  ElMessageBox.confirm("是否确认提交?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await api.order.orderSetUpdate({
        commentOvertime: orderfulf.value,
        confirmOvertime: Deliver.value,
        finishOvertime: fulfillment.value,
        flashOrderOvertime: Seckill.value,
        id: 1,
        normalOrderOvertime: Regular.value,
      });
      ElMessage({
        type: "success",
        message: "提交成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消提交",
      });
    });
};
</script>

<style lang="scss" scoped>
.conant {
  margin-top: 60px;
  margin-bottom: 20px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  position: relative;
  width: 700px;
  // height: 480px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}

.el-form {
  margin-top: 30px;
  margin-left: 50px;
}

.el-input {
  width: 300px;
}

.input {
  padding-left: 30px;
}

.input-tetx {
  width: 300px;
}

.el-button {
  margin-left: 150px;
  margin-top: 10px;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

span {
  // margin-left: 20px;
}

.el-card__body {
  top: 30px;
}</style>
